<template>
  <div id="BigPie">
    <div ref="pie1" class="pieBox"></div>
  </div>
</template>

<script>
export default {
  props: {
    valueData: Array || Object,
    iswrap: false
  },
  components: {},
  data() {
    return {
      colorList: [
        '#f3ac62',
        '#f89448',
        '#f18b6a',
        '#f06c44',
        '#fd9254',
        '#f3ac62',
        '#f89448',
        '#f18b6a',
        '#f06c44',
        '#fd9254'
      ],
      wrap: ''
    };
  },
  computed: {},
  watch: {
    valueData: {
      handler(n, o) {
        this.drawpie();
      },
      deep: true
    }
  },
  created() {
    if (this.iswrap == true) {
      this.wrap = '\n';
    } else {
      this.wrap = '';
    }
  },
  mounted() {
    this.drawpie();
  },

  methods: {
    drawpie() {
      let that = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart = that.$echarts.init(that.$refs.pie1);
      let option = {
        color: that.colorList,
        tooltip: {
          show:true,
          trigger: 'item',
          formatter: '{b} :{d}%',
          confine: true, //将此限制打开后tooltip将不再溢出
          extraCssText: 'z-index: 9' //设置消息提示框的层级
        },
        grid: {
          top: '15%', // 组件离容器上侧的距离,百分比字符串或整型数字
          left: '35%', // 组件离容器左侧的距离,百分比字符串或整型数字
          right: '35%',
          bottom: '3%',
          containLabel: true //grid 区域是否包含坐标轴的刻度标签，
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            top: '16%',
            // bottom: '16%',
            radius: ['35%', '75%'],
            center: ['50%', '50%'],
            // 下面注释这些是解决图表重叠问题的
            avoidLabelOverlap: true,
            minAngle: 5,
            labelLine: {
              // 设置指示线的长度
              normal: {
                length: 12,
                length2: 8
              }
            },
            label: {
              // position: "inside",
              // formatter: ' {b|{b}}' + that.wrap,
              formatter: function (params) {
                let dataName = params.data.name;
                if (params.data.name.length > 6) {
                  dataName = params.data.name.substring(0, 6) + '...';
                }   
                return dataName;
              },
              borderColor: '#aaa',
              avoidLabelOverlap: true,
              color: '#555',
              rich: {
                b: {
                  fontSize: 12,
                  lineHeight: 30,
                  color: '#555'
                },
                d: {
                  align: 'center',
                  color: '#555'
                }
              }
            },
            data: that.valueData
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
      this.$once('hook:beforeDestroy', () => {
        this.$echarts.dispose(myChart);
      });
    }
  }
};
</script>
<style lang='less' scoped>
#BigPie {
  width: 100%;
  height: 100%;
  .pieBox {
    width: 100%;
    height: 100%;
  }
}
</style>